import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function MyButton(props) {
  console.log("props", props);

  return <button onClick={props.onClick}>Clicked {props.count} times</button>;
}

function App() {
  const [count, setCount] = useState(1);

  function handleClick(e) {
    console.log("e", e);

    setCount(count + 1);
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <hr />

        <h2>更新界面</h2>
        <button onClick={handleClick}>click {count} times</button>

        <MyButton count={count} onClick={handleClick} />
        {/* <MyButton count={count} onClick={handleClick} /> */}
      </header>
    </div>
  );
}

export default App;
